@import "variables";
@import "mixins";
@import "layout";

.content-list {
  @extend .unstyled !optional;
  margin-left: 0;

  li {
    margin-bottom: 1em;
  }

  .description {
    font-size: 12px;
    line-height: $base-line-height * 0.7;
  }
}

ul.video-thumbnails,
ul.gui-thumbnails {
  @extend .content-list;
  margin-top: 1em;

  li {
    margin-bottom: 2em;

    img {
      display: block;
      padding: 3px;
      margin-bottom: 5px;
      border: solid 1px $base-border-color;
    }
  }
}

ul.gui-thumbnails {
  li {
    display: inline-block;
    width: 49%;
  }

  li.masked {
    display: none;
  }
}

ul.books-list {
  @extend .content-list;

  li {
    @include clearfix;
    padding-left: 125px;
    height: 150px;

    img {
      float: left;
      width: 109px;
      max-height: 150px;
      margin-right: -125px;
      margin-left: -125px;
      border: solid 1px #b7b7b7;

      &.creative-commons {
        display: block;
        float: none;
        width: auto;
        margin-top: 2em;
        margin-right: 0;
        margin-left: 0;
        border: 0;
      }
    }
  }
}

ol#about-nav {
  @extend .unstyled !optional;
  @include clearfix;

  li {
    display: inline;
    float: left;
    width: 80px;
    height: 85px;
    padding-right: 5px;
    margin-right: 7px;

    &:last-child {
      margin-right: 0;
    }

    a {
      display: block;
      width: 60px;
      height: 80px;
      padding: 0 15px;
      font-size: 13px;
      line-height: 20px;
      text-align: center;
      color: $font-color;
      opacity: 0.9;
      @include background-image-2x($baseurl + "images/icons/nav-circles", 90px, 180px);

      &.current {
        @include background-image-2x($baseurl + "images/icons/nav-circles", 90px, 180px, 0 -90px);
        color: #fff;
        opacity: 1;
      }

      &.one-line {
        height: 55px;
        padding-top: 35px;
      }

      &.two-line {
        height: 62px;
        padding-top: 28px;
      }

      &.three-line {
        height: 73px;
        padding-top: 17px;
      }

      &:hover {
        opacity: 1;
      }
    }
  }
}

ul.stackoverflow {
  @extend .unstyled !optional;
  font-size: 12px;

  li {
    margin-bottom: 1em;
  }

  a {
    display: block;
    line-height: 1.2;
    font-weight: bold;
  }

  span {
    display: block;
    color: $light-font-color;

    strong {
      color: darken($light-font-color, 10%);
    }

    em {
      color: lighten($light-font-color, 20%);
    }
  }
}

table.binaries {
  td {
    position: relative;
    width: auto;
    padding: 8px 20px 6px 0;
  }

  a {
    font-weight: bold;
    border: solid 1px transparent;
  }
}
// Breakpoint ----
@media (max-width: $default){
  ol#about-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

@media (max-width: $mobile-m){
  ol#about-nav {
    justify-content: unset;
    li {
      padding-right: 0;
      margin-right: 0.6rem;
      flex-basis: 29%;
      margin-bottom: 1rem;
    }
  }
}
